<template>
	<view style="width: 100%;padding: 0 40rpx 40rpx 40rpx;clear: both;">
		<u-form ref="uForm" :model="formData" label-width="200" label-position="top">
				
				<template>
					<u-form-item :label="$t(desire_price.label)" :label-style="labelStyle"
						:required="desire_price.required">
						<u-input v-model="formData[desire_price.key]" type="digit" :placeholder="$t(desire_price.placeholder)"
							:placeholder-style="placeholderStyle" :value="desire_price.value ? desire_price.value : ''" />
						<!-- 如果是期望单价 后面追加  价格单位 / 数量单位 -->
						<view style="position: absolute;right: 0;top: 20rpx;">{{$t("币种")}}</view>
						<template slot="right">
							<picker mode="selector" :range="price_unit" @change="onChange">
							  <view class="picker">
								{{$t(selectedValue)}}
								<uni-icons type="down" size="15"></uni-icons>
							  </view>
							</picker>
						</template>
					</u-form-item>
				</template>
				
				<template>
					<u-form-item :label="$t(goods_num.label)" :label-style="labelStyle"
						:required="goods_num.required">
						<u-input type="number" v-model="formData[goods_num.key]" :placeholder="$t(goods_num.placeholder)"
							:placeholder-style="placeholderStyle" :value="goods_num.value ? goods_num.value : ''"/>
						<template slot="right" v-if="goods_num.explain">
							<u-button type="warning" size="mini" @click="clickIcon(goods_num)">{{$t("释义")}}</u-button>
						</template>
					</u-form-item>
				</template>
				
				<template>
					<formRadio :item="number_unit" :postunit="postunit" @change="selRadio" />
				</template>
				
				<template>
					<u-form-item :label="$t(goods_weight.label)" :label-style="labelStyle"
						:required="goods_weight.required">
						<u-input v-model="formData[goods_weight.key]" type="digit" :placeholder="$t(goods_weight.placeholder)"
							:placeholder-style="placeholderStyle" :value="goods_weight.value ? goods_weight.value : ''" />
					</u-form-item>
				</template>
				
				<template>
					<u-form-item :label="$t(goods_volume.label)" :label-style="labelStyle"
						:required="goods_volume.required">
						<u-input v-model="formData[goods_volume.key]" type="digit" :placeholder="$t(goods_volume.placeholder)"
							:placeholder-style="placeholderStyle" :value="goods_volume.value ? goods_volume.value : ''" />
					</u-form-item>
				</template>
				
				<template v-if="max_size.type === 'manyInput'">
					<u-form-item :label="$t(max_size.label)" :label-style="labelStyle"
						:required="max_size.required">
						<view style="display: flex;flex-wrap: nowrap">
							<u-input v-for="(inputItem, inputIndex) in max_size.key" type="digit" :key="inputIndex"
								v-model="formData[inputItem]" :placeholder="$t(max_size.placeholder[inputIndex])"
								:value="max_size.value[inputIndex] ? max_size.value[inputIndex] : ''" />
						</view>
					</u-form-item>
				</template>
				
				<view v-for="(item, index) in items" :key="index" style="min-height: 100rpx;">
					<view>
						<input type="text" v-model="item.value1" :placeholder="$t('请输入参数名称')" @input="input1" style="border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 220rpx;float: left;margin-top: 40rpx;"/>
						<input type="text" v-model="item.value2"  :placeholder="$t('请输入参数信息')" @input="input2" style="border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 320rpx;float: left;margin-left: 20rpx;margin-top: 40rpx;"/>
						<view v-if="items.length > 1" @click="removeItem(index)" style="float: left;width: 40rpx;margin-left: 10rpx;height: 40rpx;border-radius: 20rpx;background: red;color: #fff;line-height: 40rpx;text-align: center;font-size: 38rpx;font-weight: bolder;margin-top: 55rpx;">-</view>
					</view>
				</view>
				<button @click="addItem" style="clear: both;border: 4rpx dashed #c7d8e6;background: #fff;color:#c7d8e6;margin-top: 50rpx;">＋ {{$t('自定义参数规格')}}</button>
				
				
				<view style="margin-top: 20rpx;height: 45rpx;">
					<view style="color: #ff7200;font-weight: bolder;float: left;">|</view>
					<view style="float: left;line-height: 45rpx;font-size: 28rpx;margin-left: 1%;">{{$t("详细信息")}}</view> 
				</view>
				<view style="border: 1px solid #cccccc;clear: both;width:100%;margin:0 auto;margin-top: 5%;"></view>
				<template>
					<u-form-item :label="$t(goods_brief.label)" :required="goods_brief.required">
						<u-input v-model="formData[goods_brief.key]" :placeholder="$t(goods_brief.placeholder)"
							:value="goods_brief.value ? goods_brief.value : ''" :custom-style="textareaStyle" height="300"
							type="textarea" maxlength="1500"/>
					</u-form-item>
				</template>
				
				<template>
					<formImagess :item="buy_images" :postspxq="postspxq"  @change="selImages" />
				</template>
				
				<template>
					<formFiles :item="buy_files" :postfiles="postfiles" @change="selFiles" />
				</template>
				
				
		</u-form>
		
		<u-popup v-model="show">
			<view style="width: 90%;margin-left:5%; margin-top: 60rpx; line-height: 36rpx; text-align: center; font-size: 32rpx;font-weight: bold;">{{ $t(explainTitle)||'' }}</view>
			<view style="width: 90%;margin-left:5%; margin-top: 20rpx; line-height: 36rpx; text-align: center; font-size: 28rpx;">{{ $t(explain)||'' }}</view>
			<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
				{{$t('关闭')}}
			</button>
		</u-popup>
		
	</view>
</template>

<script>
	/**
	 * 表单构建组件
	 * @author zhp
	 * @params name string 表单名
	 * @params label string 文字提示
	 * @params type string 表单类型 input,select,radio,images,files,city,goods_type_select,actionSheet,digit
	 * @params required bool 是否必填，默认true，此处只用户判断是否显示 *
	 * @params rules {} 校验规则
	 * @params details [] 详情数据，select,radio等类型使用
	 */
	import actionSheet from "../components/actionSheet.vue";
	
	import formRadio from "../components/formRadio.vue";
	import formImages from "../components/formImages.vue";
	import formImagess from "../components/formImagess.vue";
	import formFiles from "../components/formFiles.vue";
	import formVideos from "../components/formVideos.vue";
	import formCity from "../components/formCity.vue";
	import formCity2 from "../components/formCity2.vue";
	
	import formPortCity from "../components/formPortCity.vue";
	import formPicker from "../components/formPicker.vue";
	import formSelect from "../components/formSelect.vue";
	import formCheckBox from "../components/formCheckBox.vue";

	export default {
		components: {
			actionSheet,
			formRadio,
			formImages,
			formImagess,
			formFiles,
			formCity,
			formCity2,
			formPicker,
			formSelect,
			formCheckBox,
			formPortCity,
			formVideos
		},
		props: {
			formItems: {
				type: Array,
				default: [],
				required: true
			},
			// 表单数据
			value: {
				type: [Array,Object],
				required: true
			},
			postunit:{
				type: [Array,Object,Number,String],
				default:''
			},
			postparameter:{
				type: [Array,Object,Number,String],
				default:''
			},
			postparameter_ru:{
				type: [Array,Object,Number,String],
				default:''
			},
			postspxq:{
				type: [Array,Object,Number,String],
				default:''
			},
			postfiles:{
				type: [Array,Object,Number,String],
				default:''
			},
		},
		data() {
			return {
				items: [
					{ value1: '',value2:'' } // 初始为一个空的输入框
				],
				errorMessage: '',
				sel_list1:[],
				sel_list2:[],
				show:false,
				explainTitle:'',
				explain:'',
				is_margin_show:1,
				labelStyle: {
					'word-break': 'break-all',
				},
				lang: getApp().globalData.lang,
				formData: {},
				placeholderStyle: "text-align: left;margin-left:3%;margin-top:3%;",
				textareaStyle: {
					// padding: "20rpx",
					border: "4rpx solid #cccccc",
					height: "300rpx"
				},
				desire_price:{
					key: "desire_price",
					label: "单价",
					placeholder: "请输入数字",
					type: "number",
					required: true,
					slot:'price_unit',
					slot1:'number_unit',
					value: "",
					rules: {},
				},
				goods_num:{
					key: "goods_num",
					label: "起批数量",
					placeholder: "请输入数字",
					type: "number",
					required: true,
					value: "",
					rules: {},
				},
				price_unit: [this.$t('元'), this.$t('卢布')],
				selectedValue: this.$t('元'), // 默认选中项
				number_unit:{
					key: "number_unit",
					label: "数量单位",
					placeholder: "请选择数量单位",
					// type: "select",
					type: "radio",
					wrap: false,
					required: true,
					value: "",
					rules: {},
					details: {
						type: "numberUnit"
					}
				},
				goods_weight:{
					key: "goods_weight",
					label: "单件重量(kg)",
					placeholder: "请输入数字",
					type: "number",
					required: true,
					value: "",
					rules: {},
				},
				goods_volume:{
					key: "goods_volume",
					label: "单件体积(m³)",
					placeholder: "请输入数字",
					type: "number",
					required: true,
					value: "",
					rules: {},
				},
				max_size:{
					key: ['goods_l', 'goods_w', 'goods_h'],
					label: "单件商品最大尺寸",
					placeholder: ['长', '宽', '高'],
					type: "manyInput",
					required: false,
					value: ['', '', ''],
					rules: {},
				},
				goods_brief:{
					key: "goods_brief",
					label: "商品介绍",
					placeholder: "请输入商品介绍",
					type: "textarea",
					required: true,
					value: "",
					rules: {},
				},
				buy_images:{
					key: "buy_images",
					label: "商品详情图片",
					placeholder: "商品详情图片",
					type: "images",
					required: false,
					value: [],
					rules: {},
				},
				buy_files:{
					key: "buy_files",
					label: "上传文件",
					placeholder: "",
					type: "files",
					required: false,
					value: [],
					rules: {},
				}
				
				// rules: {
				//     name: {
				//         required: true,
				//         message: '请输入名称',
				//         trigger: ['change','blur']
				//     }
				// }
			}
		},
		mounted() {
			// console.log('buildForm-mounted-index formItems', this.formItems)
			// console.log('buildForm-mounted-index value', this.value)
			// console.log('buildForm-mounted-index formData', this.formData)
			
			this.formData = this.value
		},
		watch: {
			formData: {
				handler(val) {
					if(val.price_unit){
						this.selectedValue=val.price_unit
					}
					// this.selectedValue=val.price_unit
					this.$emit('input', val)
				},
				deep: true,
			},
			formItems: {
				handler(val) {
					this.formItems = val
				},
			},
			postparameter: {
				handler(val) {
					if(this.value.id>0){
						if(this.lang=='zh'){
							console.log(this.value);
							this.items=val
						}
					}
				},
				immediate: true,
			},
			postparameter_ru: {
				handler(val) {
					if(this.value.id>0){
						if(this.lang=='ru'){
							console.log(this.value);
							this.items=val
						}
					}
				},
				immediate: true,
			},
		},
		methods: {
			input1(){
				console.log(this.items);
				this.formData.parameter=this.items
			},
			input2(){
				console.log(this.items);
				this.formData.parameter=this.items
			},
			addItem() {
			  console.log(this.items);
			  this.items.push({ value1: '',value2:'' }); // 添加一个新的空输入框
			},
			removeItem(index) {
			  this.items.splice(index, 1); // 删除指定索引的输入框
			  this.formData.parameter=this.items
			},
			onChange(e) {
			  this.selectedValue = this.price_unit[e.detail.value];
			  this.formData.price_unit=this.selectedValue;
			  console.log(this.formData.price_unit)
			},
			//切换货物所在地 分类id
			change(id) {
				this.classCurrent = id
				this.GoodsList()
			},
			checkAmount(event) {
			  const value = event;
			  const regex = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; // 正则表达式，匹配最多有两位小数的金额数字
			  if (!regex.test(value)) {
				this.$u.toast(this.$t('请输入正确的金额格式!'));
			  }
			},
			selActionSheet(key, value,list) {  
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list1 = list	
				this.$emit('changeActionSheet', value,this.sel_list1,key)
			},
			selActionSheet2(key, value,list) {
				console.log({'key':key,'value':value,'list':list})
				this.formData[key] = value
				this.sel_list2 = list
				this.$emit('changeActionSheet2', value,this.sel_list2,key)
			},
			guanbi(){
				this.show=false
			},
			// selCheckbox(key, value) {
			// 	this.formData[key] = value
			// },
			selRadio(key, value) {
				
				if(key=='is_margin'){
					if(value=='1'){
						this.is_margin_show=1
					}else{
						this.is_margin_show=2
					}
				}
				
				this.formData[key] = value
			
			
			},
			selImages(key, value) {
				console.log(value+key);
				this.formData[key] = value
			},
			selFiles(key, value) {
				this.formData[key] = value
			},
			// selFiles2(key, value) {
			// 	this.formData[key] = value
			// },
			selVideos(key, value) {
				this.formData[key] = value
			},
			// selCity(key, value) {
			// 	this.formData[key] = value
			// },
			// selPicker(key, value) {
			// 	this.formData[key] = value
			// },
			// selectChange(key, value) {
			// 	this.formData[key] = value
			// },
			clickIcon(item) {
				if (item.explain) {
					let me = this;
					// uni.showModal({
					// 	title: me.$t(item.explainTitle),
					// 	content: me.$t(item.explain),
					// 	showCancel: false,
					// 	confirmText: "ok"
					// })
					
					me.explainTitle = item.explainTitle
					me.explain = item.explain
					
					me.show=true
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav_z{
		width: 80%;height:50rpx;display: flex;position: absolute;top: 15rpx; left: 20%;
	}
	.tab_nav{ width: 23%;margin:0 1%; line-height: 50rpx;text-align: center;border-radius: 10rpx;   color: #606266;font-size: 24rpx ;background-color: rgb(237, 237, 237);padding:1% 0 ;}
	.tabnav_ru{width: 23%;margin:0 1%;line-height: 35rpx; text-align: center;border-radius: 10rpx;   color: #606266;font-size: 18rpx ;background-color: rgb(237, 237, 237);padding:1% 0 ;}
	
	.tab_nav_on{ color: #fff !important;background-image: linear-gradient(to right, #ffd234, #ff884d) !important;}
</style>